<template>
    <div class="user">
        <el-form :inline="true" :model="searchParam" class="demo-form-inline">
            <el-form-item>
                <el-input
                    clearable
                    v-model="searchParam.name"
                    placeholder="物品名称"
                />
            </el-form-item>
            <el-form-item>
                <el-select clearable v-model="searchParam.publishSchoolUuid" placeholder="请选择学校">
                    <el-option v-for="school in data.schools" :key="school.uuid" :label="school.name"
                               :value="school.uuid"/>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-select
                    clearable
                    v-model="searchParam.isSyncLibertySquare"
                    placeholder="是否同步自由广场"
                >
                    <el-option label="同步" value="true"/>
                    <el-option label="未同步" value="false"/>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-select
                    clearable
                    v-model="searchParam.status"
                    placeholder="请选择状态"
                >
                    <el-option label="待审核" value="1"/>
                    <el-option label="未通过" value="2"/>
                    <el-option label="未认领" value="3"/>
                    <el-option label="已认领" value="4"/>
                    <el-option label="未找到" value="5"/>
                    <el-option label="已找到" value="6"/>
                    <el-option label="已撤回" value="7"/>
                </el-select>
            </el-form-item>
            <el-form-item style="width: auto">
                <el-button type="primary" @click="search" size="small">查询</el-button>
                <el-button type="primary" @click="exportLostFoundItemData" size="small">导出物品</el-button>
                <el-button type="warning" @click="batchRevokeLostFoundItem" size="small">批量撤回</el-button>
                <el-button type="success" @click="batchPublishLostFoundItem" size="small">批量发布</el-button>
                <el-button type="danger" @click="batchDeleteLostFoundItem" size="small">批量删除</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="data.lostFoundItems" border style="width: 100%" v-loading="data.loading"
                  element-loading-text="拼命加载中" @selection-change="handleSelectionChange">
            <el-table-column type="selection" align="center" width="70px"/>
            <el-table-column fixed prop="name" label="物品名称" align="center" width="300px"/>
            <el-table-column fixed prop="categoryName" label="所属分类" align="center" width="150px"/>
            <el-table-column prop="type" label="发布类型" align="center" width="150px">
                <template #default="scope">
                    <el-tag
                        v-show="scope.row.type === 1" type="primary"
                        disable-transitions
                    >拾取
                    </el-tag>
                    <el-tag
                        v-show="scope.row.type === 2" type="primary"
                        disable-transitions
                    >丢失
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="location" label="丢失或拾取地点" align="center" width="150px"/>
            <el-table-column prop="publishNickName" label="发布人" align="center" width="150px"/>
            <el-table-column prop="publishSchoolName" label="发布学校" align="center" width="150px"/>
            <el-table-column prop="viewNumber" label="浏览次数" align="center" width="150px"/>
            <el-table-column prop="disable" label="是否同步自由广场" align="center" width="150px">
                <template #default="scope">
                    <el-tag
                        :type="scope.row.isSyncLibertySquare ? 'success' : 'primary'"
                        disable-transitions
                    >{{ scope.row.isSyncLibertySquare ? "同步" : "未同步" }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" align="center" width="150px">
                <template #default="scope">
                    <el-tag
                        v-show="scope.row.status === 1" type="primary"
                        disable-transitions
                    >待审核
                    </el-tag>
                    <el-tag
                        v-show="scope.row.status === 2" type="danger"
                        disable-transitions
                    >未通过
                    </el-tag>
                    <el-tag
                        v-show="scope.row.status === 3" type="info"
                        disable-transitions
                    >未认领
                    </el-tag>
                    <el-tag
                        v-show="scope.row.status === 4" type="success"
                        disable-transitions
                    >已认领
                    </el-tag>
                    <el-tag
                        v-show="scope.row.status === 5" type="info"
                        disable-transitions
                    >未找到
                    </el-tag>
                    <el-tag
                        v-show="scope.row.status === 6" type="success"
                        disable-transitions
                    >已找到
                    </el-tag>
                    <el-tag
                        v-show="scope.row.status === 7" type="warning"
                        disable-transitions
                    >已撤回
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column
                prop="createTime"
                label="创建时间"
                width="180"
                align="center"
            >
            </el-table-column>
            <el-table-column
                prop="updateTime"
                label="更新时间"
                width="180"
                align="center"
            >
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="230" align="center">
                <template #default="scope">
                    <el-button
                        class="button-space"
                        @click="toLostFoundItemExamine(scope.row.uuid)"
                        v-show="scope.row.status === 1"
                        type="success"
                        size="small"
                    >审核
                    </el-button>
                    <el-button
                        class="button-space"
                        @click="publishLostFoundItem(scope.row.uuid)"
                        v-show="scope.row.status === 7"
                        type="warning"
                        size="small"
                    >发布
                    </el-button>
                    <el-button
                        class="button-space"
                        @click="revokeLostFoundItem(scope.row.uuid)"
                        v-show="scope.row.status === 3 || scope.row.status === 5"
                        type="success"
                        size="small"
                    >撤回
                    </el-button>
                    <el-button
                        class="button-space"
                        @click="toDetail(scope.row.uuid)"
                        v-show="scope.row.status !== 1"
                        type="info"
                        size="small"
                    >详情
                    </el-button>
                    <el-popconfirm
                        title="你确定要删除该物品吗？"
                        confirm-button-text="是"
                        cancel-button-text="否"
                        @confirm="deleteLostFoundItem(scope.row.uuid)"
                    >
                        <template #reference>
                            <el-button
                                class="button-space"
                                type="danger"
                                size="small"
                            >删除
                            </el-button>
                        </template>

                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            layout="prev, pager, next"
            :total="data.total"
            style="text-align: center; margin-top: 10px"
            @current-change="currentChange"
        >
        </el-pagination>
        <!-- 审核物品 -->
        <el-dialog title="物品审核" v-model="data.lostFoundItemExamineDisable">
            <el-form :model="data.lostFoundItemDetail">
                <el-form-item label="名称" label-width="130px">
                    <el-input v-model="data.lostFoundItemDetail.name" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="所属分类" label-width="130px">
                    <el-input v-model="data.lostFoundItemDetail.categoryName" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="描述" label-width="130px">
                    <el-input v-model="data.lostFoundItemDetail.description" type="textarea" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="丢失地点" label-width="130px">
                    <el-input v-model="data.lostFoundItemDetail.location" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="发布人" label-width="130px">
                    <el-input v-model="data.lostFoundItemDetail.publishNickName" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="发布学校" label-width="130px">
                    <el-input v-model="data.lostFoundItemDetail.publishSchoolName" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="联系方式" label-width="130px">
                    <el-input v-model="data.lostFoundItemDetail.contactWay" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="商品图片" label-width="130px">
                    <el-image style="width: 100px; height: 100px" :src="image" fit="fit"
                              v-for="image in data.lostFoundItemDetail.images" :key="image"
                              :preview-src-list="data.lostFoundItemDetail.images"/>
                </el-form-item>
                <el-form-item label-width="130px">
                    <el-button @click="noPassExamine(data.lostFoundItemDetail.uuid)">不通过</el-button>
                    <el-button type="primary" @click="passExamine(data.lostFoundItemDetail.uuid)">通过</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import {all} from "@/api/school/school";
import {onMounted, reactive} from "vue";
import {
    page,
    noPass,
    pass,
    publish,
    revoke,
    deleted,
    exportLostFoundItem,
    batchRevoke,
    batchPublish,
    batchDelete
} from "@/api/lostFoundItem/lostFoundItem";
import {ElLoading, ElMessage, ElMessageBox} from "element-plus";
import {useRouter} from 'vue-router'
import dayjs from "dayjs";

export default {
    name: "lostFoundItem",
    setup() {
        const searchParam = reactive({
            name: '',
            publishSchoolUuid: '',
            status: '',
            page: 1,
            size: 10,
            isSyncLibertySquare: ''
        })
        const data = reactive({
            schools: [],
            lostFoundItems: [],
            loading: true,
            total: 0,
            lostFoundItemExamineDisable: false,
            lostFoundItemDetail: '',
            selectUuids: []
        })
        const router = useRouter();
        /**
         * 获取全部学校
         * @returns {Promise<void>}
         */
        const allSchool = async () => {
            all().then(res => {
                data.schools = res.data
            })
        }
        /**
         * 分页查询物品
         */
        const pageSearch = async () => {
            page(searchParam).then(res => {
                data.lostFoundItems = res.data.records
                data.loading = false
                data.total = res.data.total
            })
        }
        /**
         * 搜索查询商品
         * @returns {Promise<void>}
         */
        const search = async () => {
            data.loading = true
            page(searchParam).then(res => {
                data.lostFoundItems = res.data.records
                data.total = res.data.total
                data.loading = false
            })
        }
        /**
         * 审核物品
         * @returns {Promise<void>}
         */
        const toLostFoundItemExamine = async (uuid) => {
            await router.push({path: '/lostFoundItem/examine', query: {uuid: uuid}})
        }
        /**
         * 审核不通过
         * @param uuid
         * @returns {Promise<void>}
         */
        const noPassExamine = async (uuid) => {
            noPass(uuid).then(() => {
                ElMessage({
                    message: '审核完成',
                    type: 'success',
                })
                data.lostFoundItemExamineDisable = false
                pageSearch()
            })
        }

        /**
         * 审核通过
         * @param uuid
         * @returns {Promise<void>}
         */
        const passExamine = async (uuid) => {
            pass(uuid).then(() => {
                ElMessage({
                    message: '审核完成',
                    type: 'success',
                })
                data.lostFoundItemExamineDisable = false
                pageSearch()
            })
        }
        /**
         * 发布物品
         */
        const publishLostFoundItem = async (uuid) => {
            publish(uuid).then(() => {
                ElMessage({
                    message: '发布成功',
                    type: 'success',
                })
                pageSearch()
            })
        }

        /**
         * 撤回物品
         */
        const revokeLostFoundItem = async (uuid) => {
            revoke(uuid).then(() => {
                ElMessage({
                    message: '撤回成功',
                    type: 'success',
                })
                pageSearch()
            })
        }
        /**
         * 删除物品
         * @param uuid
         * @returns {Promise<void>}
         */
        const deleteLostFoundItem = async (uuid) => {
            deleted(uuid).then(() => {
                ElMessage({
                    message: '删除成功',
                    type: 'success',
                })
                pageSearch()
            })
        }
        /**
         * 跳转到详情
         * @returns {Promise<void>}
         */
        const toDetail = async (uuid) => {
            await router.push({path: "/lostFoundItem/detail", query: {uuid: uuid}})
        }
        /**
         * 导出物品
         */
        const exportLostFoundItemData = () => {
            const loading = ElLoading.service({
                lock: true,
                text: '导出中...',
                background: 'rgba(0, 0, 0, 0.7)',
            })
            exportLostFoundItem(searchParam).then(res => {
                const blob = new Blob([res]);
                const day = dayjs().format('YYYY-MM-DD');
                const fileName = `物品列表${day}.xls`;
                const elink = document.createElement('a');
                elink.download = fileName;
                elink.style.display = 'none';
                elink.href = URL.createObjectURL(blob);
                document.body.appendChild(elink);
                elink.click();
                URL.revokeObjectURL(elink.href); // 释放URL 对象
                document.body.removeChild(elink);
                loading.close()
            })
        }
        /**
         * 批量选中
         * @param selection
         */
        const handleSelectionChange = (selection) => {
            data.selectUuids = selection.map(select => {
                return select.uuid
            })
        }
        /**
         * 批量撤回物品
         */
        const batchRevokeLostFoundItem = () => {
            if (data.selectUuids.length <= 0) {
                ElMessage({
                    message: '至少选择一个物品',
                    type: 'warning',
                })
                return
            }
            ElMessageBox.confirm(
                '你确定要撤回所选择物品吗',
                '提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
                .then(() => {
                    batchRevoke(data.selectUuids).then(() => {
                        ElMessage({
                            message: '撤回成功',
                            type: 'success',
                        })
                        data.selectUuids = []
                        pageSearch()
                    })
                })
                .catch(() => {
                    ElMessage({
                        type: 'info',
                        message: '取消撤回',
                    })
                })
        }
        /**
         * 批量发布物品
         */
        const batchPublishLostFoundItem = () => {
            if (data.selectUuids.length <= 0) {
                ElMessage({
                    message: '至少选择一个物品',
                    type: 'warning',
                })
                return
            }
            ElMessageBox.confirm(
                '你确定要发布所选择物品吗',
                '提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
                .then(() => {
                    batchPublish(data.selectUuids).then(() => {
                        ElMessage({
                            message: '发布成功',
                            type: 'success',
                        })
                        data.selectUuids = []
                        pageSearch()
                    })
                })
                .catch(() => {
                    ElMessage({
                        type: 'info',
                        message: '取消发布',
                    })
                })
        }
        /**
         * 批量删除物品
         */
        const batchDeleteLostFoundItem = () => {
            if (data.selectUuids.length <= 0) {
                ElMessage({
                    message: '至少选择一个物品',
                    type: 'warning',
                })
                return
            }
            ElMessageBox.confirm(
                '你确定要删除所选择物品吗',
                '警告',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'error',
                }
            )
                .then(() => {
                    batchDelete(data.selectUuids).then(() => {
                        ElMessage({
                            message: '删除成功',
                            type: 'success',
                        })
                        data.selectUuids = []
                        pageSearch()
                    })
                })
                .catch(() => {
                    ElMessage({
                        type: 'info',
                        message: '取消删除',
                    })
                })
        }
        onMounted(() => {
            allSchool();
            pageSearch()
        })
        return {
            searchParam,
            data,
            search,
            toLostFoundItemExamine,
            noPassExamine,
            passExamine,
            publishLostFoundItem,
            revokeLostFoundItem,
            deleteLostFoundItem,
            toDetail,
            exportLostFoundItemData,
            batchRevokeLostFoundItem,
            batchPublishLostFoundItem,
            batchDeleteLostFoundItem,
            handleSelectionChange
        }
    }
}
</script>

<style scoped>

</style>